<template>
    <div>
        <div style="display:flex;align-items:center;justify-content: flex-end;">
            <div class="before" @click="turn(Current-1)">上一页</div>
            <div class="pagenum" v-for="(item, index) in totalPage" :key="index" :class="{'pagenumclick':Current === item}" @click="turn(item)">{{item}}</div>
            <div class="before" @click="turn(Current+1)">下一页</div>
            <div style="margin:8px">共{{totalPage}}页</div>
            <div style="margin:8px">到第</div>
            <input class="input" v-model="inputpage"/>
            <div style="margin:8px">页</div>
            <div class="button" @click="turn(inputpage)">确定</div>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    Current: {// 当前页
      type: Number,
      default: 1
    },
    limit: {// 每页显示条数
      type: Number,
      default: 10
    },
    totalCount: {// 总条数
      type: Number,
      required: true
    }
  },
  data () {
    return {
      inputpage: ''
    }
  },
  computed: {
    totalPage () {
      return Math.ceil(this.totalCount / this.limit)
    }
  },
  methods: {
    gopage () {
      this.Current = this.inputpage
    },
    turn (page) {
      let i = parseInt(Number(page))
      if (i < 1) {
        i = 1
      } else if (i > this.totalPage) {
        i = this.totalPage
      }
      this.$emit('update:Current', i)
      this.$emit('turn')
    }
  }
}
</script>
<style scoped>
.button{
    width: 46px;
    height: 30px;
    background-color: #0d1c30;
    border-radius: 4px;
    display: flex;
    margin: 8px;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
}
.button:hover{
    background-color: #0d1c30;
}
.input{
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 4px;
    margin: 8px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2b3340;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}
.before{
    width: 60px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 4px;
    margin: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2b3340;
    font-size: 12px;
    cursor: pointer;
}
.before:hover{
    background-color: #0d1c30;
    color: #ffffff;
}
.pagenum{
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 4px;
    margin: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2b3340;
    font-size: 12px;
}
.pagenumclick{
    background-color: #0d1c30;
    color: #ffffff;
}
.pagenum:hover{
    background-color: #0d1c30;
    color: #ffffff;
}
</style>
